<template>
  <div>
    <van-nav-bar
      title="城市列表"
      left-arrow
      @click-left="$router.push('/')"
      fixed
    />
    <div class="fromDiv">
      <van-form @submit="onSubmit">
        <van-cell value="房源信息" value-class="title" />
        <van-cell title="小区名称" is-link :value="this.$route.params.label ? this.$route.params.label : '请选择小区'" to="/add/search"/>
        <!---------------->
        <van-field
          v-model="price"
          name="price"
          label="租金"
          placeholder="请输入租金/月"
          :rules="[{ required: true, message: '请输入租金' }]"
        >
          <template #extra>
            <span class="extra">￥/月</span>
          </template>
        </van-field>
        <!---------------->
        <van-field
          v-model="size"
          name="size"
          label="建筑面积"
          placeholder="请输入建筑面积"
          :rules="[{ required: true, message: '请输入面积' }]"
        >
          <template #extra>
            <span class="extra">m²</span>
          </template>
        </van-field>
        <!---------------->
        <van-field
          readonly
          clickable
          name="roomType"
          :value="roomType"
          label="户型"
          is-link
          placeholder="点击选择户型"
          input-align="right"
          @click="showRoomType = true"
          :rules="[{ required: true, message: '请输选择户型' }]"

        />
        <van-popup v-model="showRoomType" position="bottom">
          <van-picker
            show-toolbar
            :columns="roomTypes"
            @confirm="roomTypeFn"
            @cancel="showRoomType = false"
          />
        </van-popup>
        <!---------------->
        <van-field
          readonly
          clickable
          name="floor"
          :value="floor"
          label="所在楼层"
          is-link
          placeholder="点击选择楼层"
          input-align="right"
          @click="showFloor = true"
          :rules="[{ required: true, message: '请输选择楼层' }]"
        />
        <van-popup v-model="showFloor" position="bottom">
          <van-picker
            show-toolbar
            :columns="floors"
            @confirm="floorFn"
            @cancel="showFloor = false"
          />
        </van-popup>
        <!---------------->
        <van-field
          readonly
          clickable
          name="oriented"
          :value="oriented"
          label="朝向"
          is-link
          placeholder="点击选择朝向"
          input-align="right"
          @click="showOriented = true"
          :border="false"
          :rules="[{ required: true, message: '请输选择朝向' }]"
        />
        <van-popup v-model="showOriented" position="bottom">
          <van-picker
            show-toolbar
            :columns="orienteds"
            @confirm="orientedFn"
            @cancel="showOriented = false"
          />
        </van-popup>
        <!---------------->
        <van-cell value="房屋标题" />
        <van-field
          v-model="title"
          name="title"
          placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
          :border="false"
          :rules="[{ required: true, message: '请输输入标题' }]"
        />
        <!---------------->
        <van-cell value="房屋图像" :rules="[{ required: true, message: '请设置图像' }]" />
        <van-field name="uploader" >
          <template #input >
            <van-uploader v-model="houseImg">
              <template>
                <div class="uploader van-image van-uploader__preview-image">
                  <van-icon name="plus" />
                </div>
              </template>
            </van-uploader>
          </template>
        </van-field>
        <!---------------->
        <div class="nopad">
          <van-cell value="房屋配置" />
          <van-field name="supporting">
            <template #input>
              <van-checkbox-group v-model="supporting" direction="horizontal">
                <van-grid :column-num="5" class="supporting" :border="false">
                  <van-grid-item>
                    <van-checkbox name="衣柜" shape="square">
                      <template #icon="props">
                        <div :class="props.checked ? 'color' : ''" class="item">
                          <i class="iconfont icon-wardrobe HousePackage_icon__2hT31"></i>
                          <p>衣柜</p>
                        </div>
                      </template>
                    </van-checkbox>
                  </van-grid-item>
                  <van-grid-item>
                    <van-checkbox name="洗衣机" shape="square">
                      <template #icon="props">
                        <div :class="props.checked ? 'color' : ''" class="item">
                          <i class="iconfont icon-wash HousePackage_icon__2hT31"></i>
                          <p>洗衣机</p>
                        </div>
                      </template>
                    </van-checkbox>
                  </van-grid-item>
                  <van-grid-item>
                    <van-checkbox name="空调" shape="square">
                      <template #icon="props">
                        <div :class="props.checked ? 'color' : ''" class="item">
                          <i class="iconfont icon-air HousePackage_icon__2hT31"></i>
                          <p>空调</p>
                        </div>
                      </template>
                    </van-checkbox>
                  </van-grid-item>
                  <van-grid-item>
                    <van-checkbox name="天然气" shape="square">
                      <template #icon="props">
                        <div :class="props.checked ? 'color' : ''" class="item">
                          <i class="iconfont icon-gas HousePackage_icon__2hT31"></i>
                          <p>天然气</p>
                        </div>
                      </template>
                    </van-checkbox>
                  </van-grid-item>
                  <van-grid-item>
                    <van-checkbox name="冰箱" shape="square">
                      <template #icon="props">
                        <div :class="props.checked ? 'color' : ''" class="item">
                          <i class="iconfont icon-ref HousePackage_icon__2hT31"></i>
                          <p>冰箱</p>
                        </div>
                      </template>
                    </van-checkbox>
                  </van-grid-item>
                  <van-grid-item>
                    <van-checkbox name="暖气" shape="square">
                      <template #icon="props">
                        <div :class="props.checked ? 'color' : ''" class="item">
                          <i class="iconfont icon-Heat HousePackage_icon__2hT31"></i>
                          <p>暖气</p>
                        </div>
                      </template>
                    </van-checkbox>
                  </van-grid-item>
                  <van-grid-item>
                    <van-checkbox name="电视" shape="square">
                      <template #icon="props">
                        <div :class="props.checked ? 'color' : ''" class="item">
                          <i class="iconfont icon-vid HousePackage_icon__2hT31"></i>
                          <p>电视</p>
                        </div>
                      </template>
                    </van-checkbox>
                  </van-grid-item>
                  <van-grid-item>
                    <van-checkbox name="热水器" shape="square">
                      <template #icon="props">
                        <div :class="props.checked ? 'color' : ''" class="item">
                          <i class="iconfont icon-heater HousePackage_icon__2hT31"></i>
                          <p>热水器</p>
                        </div>
                      </template>
                    </van-checkbox>
                  </van-grid-item>
                  <van-grid-item>
                    <van-checkbox name="宽带" shape="square">
                      <template #icon="props">
                        <div :class="props.checked ? 'color' : ''" class="item">
                          <i class="iconfont icon-broadband HousePackage_icon__2hT31"></i>
                          <p>宽带</p>
                        </div>
                      </template>
                    </van-checkbox>
                  </van-grid-item>
                  <van-grid-item>
                    <van-checkbox name="沙发" shape="square">
                      <template #icon="props">
                        <div :class="props.checked ? 'color' : ''" class="item">
                          <i class="iconfont icon-sofa HousePackage_icon__2hT31"></i>
                          <p>沙发</p>
                        </div>
                      </template>
                    </van-checkbox>
                  </van-grid-item>
                </van-grid>
              </van-checkbox-group>
            </template>
          </van-field>
        </div>
        <!---------------->
        <div style="margin: 20px 0">
          <van-cell value="房屋描述" />
          <van-field
            v-model="description"
            name="description"
            placeholder="请输入房屋描述信息"
            :border="false"
            style="height: 128px;"
            :rules="[{ required: true}]"
          />
        </div>
        <!---------------->
        <van-grid
          :border="false"
          :column-num="2"
          :gutter="0"
          class="addHouseButton"
        >
          <van-grid-item class="item">
            <van-button plain type="info" block square @click="cancelFn"
              >取消</van-button
            >
          </van-grid-item>
          <van-grid-item>
            <van-button block square type="info" native-type="submit"
              >提交</van-button
            >
          </van-grid-item>
        </van-grid>
      </van-form>
    </div>
  </div>
</template>

<script>
import '@/icon/iconfont.css'
import { Dialog } from 'vant'
import { uploadImage, postHouse } from '@/api/homo'
export default {
  data () {
    return {
      price: '',
      size: '',
      roomType: '',
      roomTypes: ['一室', '二室', '三室', '四室', '四室+'],
      showRoomType: false,
      floor: '',
      floors: ['高楼层', '中楼层', '低楼层'],
      showFloor: false,
      oriented: '',
      orienteds: ['东', '南', '西', '北', '东南', '东北', '西南', '西北'],
      showOriented: false,
      title: '',
      houseImg: [],
      supporting: [],
      description: '',
      community: '',
      imgList: [],
      uploaderImg: []
    }
  },
  updated () {
    this.community = this.$route.params.value
  },
  methods: {
    cancelFn () {
      Dialog.confirm({
        title: '提示',
        message: '放弃发布房源？',
        confirmButtonColor: '#108ee9',
        confirmButtonText: '继续编辑',
        cancelButtonText: '放弃'
      })
        .then(() => {
          // on then
          // console.log(this.$route.params.value)
        })
        .catch(() => {
          this.$router.push('/')
        })
    },
    async onSubmit (values) {
      if (!values.uploader.length) {
        this.$toast('您未上传房屋图像')
      } else {
        if (this.$route.params.value) {
          console.log(values)
          // values.uploader.forEach(item => { this.imgList.push(item.file) })
          values.uploader.forEach(async (item, index) => {
            const { body } = await uploadImage(item.file)
            this.uploaderImg.push(body[0])
            if (values.uploader.length - 1 === index) {
              const roomTypes = [
                { label: '一室', value: 'ROOM|d4a692e4-a177-37fd' },
                { label: '二室', value: 'ROOM|d1a00384-5801-d5cd' },
                { label: '三室', value: 'ROOM|20903ae0-c7bc-f2e2' },
                { label: '四室', value: 'ROOM|ce2a5daa-811d-2f49' },
                { label: '四室+', value: 'ROOM|2731c38c-5b19-ff7f' }
              ]
              const okayRoomType = roomTypes.find(item => item.label === values.roomType)
              const orienteds = [
                { label: '东', value: 'ORIEN|141b98bf-1ad0-11e3' },
                { label: '西', value: 'ORIEN|103fb3aa-e8b4-de0e' },
                { label: '南', value: 'ORIEN|61e99445-e95e-7f37' },
                { label: '北', value: 'ORIEN|caa6f80b-b764-c2df' },
                { label: '东南', value: 'ORIEN|dfb1b36b-e0d1-0977' },
                { label: '东北', value: 'ORIEN|67ac2205-7e0f-c057' },
                { label: '西南', value: 'ORIEN|2354e89e-3918-9cef' },
                { label: '西北', value: 'ORIEN|80795f1a-e32f-feb9' }
              ]
              const okayOriented = orienteds.find(item => item.label === values.oriented)
              const floors = [
                { label: '高楼层', value: 'FLOOR|1' },
                { label: '中楼层', value: 'FLOOR|2' },
                { label: '低楼层', value: 'FLOOR|3' }
              ]
              const okayfloor = floors.find(item => item.label === values.floor)
              setTimeout(async () => {
                const res = await postHouse({
                  title: values.title,
                  description: values.description,
                  houseImg: this.uploaderImg.join('|'),
                  oriented: okayOriented.value,
                  supporting: values.supporting.join('|'),
                  price: values.price,
                  roomType: okayRoomType.value,
                  size: values.size,
                  floor: okayfloor.value,
                  community: this.$route.params.value
                })
                console.log(body)
                if (res.status === 200) {
                  Dialog.confirm({
                    title: '提示',
                    message: '房源发布成功',
                    confirmButtonColor: '#108ee9',
                    confirmButtonText: '继续发布',
                    cancelButtonText: '去查看'
                  })
                    .then(() => {
                      // on then
                      history.go(0)
                    })
                    .catch(() => {
                      this.$router.push('/search')
                    })
                }
              }, 0)
            }
          })

        // const res = await uploadImage(this.imgList)
        // const res = await uploadImage(this.imgList)
        // console.log('submit', values)
        // console.log(res)
        } else {
          this.$toast('您未设置小区')
        }
      }
    },
    roomTypeFn (value) {
      this.roomType = value
      this.showRoomType = false
    },
    floorFn (value) {
      this.floor = value
      this.showFloor = false
    },
    orientedFn (value) {
      this.oriented = value
      this.showOriented = false
    }
  }
}
</script>

<style lang="less" scoped>
.nopad {
  .van-field{
    padding: 0;
  }
}
.fromDiv {
  padding: 46px 0;
  background-color: #f5f5f9;
  .title {
    color: @blue;
    font-size: 15px;
  }
  .extra {
    color: #888;
  }
  .van-cell.van-field ::v-deep .van-cell__title {
    text-align: justify;
    text-justify: distribute-all-lines;
    text-align-last: justify;
    width: 4em;
  }
  .van-uploader{
    ::v-deep .van-uploader__preview{
      margin: 1px 2.8px 4px 2.8px;
      .van-uploader__preview-delete{
        top: 4px;
        right: 3px;
        border-radius: 3.2vw;
      }
    }
    .uploader{
      border: 1px solid #888;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
  .van-checkbox-group.van-checkbox-group--horizontal{
    width: 100%;

  }
  .supporting{
    width: 100%;
    .van-grid-item{
      ::v-deep .van-grid-item__content{
        padding: 5px 0;
      }
      .van-checkbox--horizontal {
        margin: 0;
        ::v-deep .van-checkbox__icon{
          width: 100%;
          height: 100%;
        }
        .color{
          color: @blue
        }
      }
    }
    .item {
      font-size: 14px;
      padding: 5px 0;
      text-align: center;
      i{
        font-size: 23px;
      }
    }
  }
}
.addHouseButton {
  position: fixed;
  bottom: 0;
  width: 100%;
  .van-grid-item ::v-deep div {
    padding: 0;
    .van-button--info {
      border: none;
    }
  }
}
</style>
